﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>歌单详情</title>
    <style>
        .display{
            margin-top:1%;
            padding:0 20%;
            width:60%;
            min-height:920px;
        }
        .left{
            float:left;
            width:65%;
        }
        .right {
            float: right;
            width: 32%;
            padding-top:230px;
        }
        .lefttop{
            height:230px;
        }
        .leftimg{
            width:30%;
            float:left;
        }

        .leftdesc{
            width:63%;
            float:right;
            line-height:26px;
            font-size:14px;
        }
        .on {
            background-color: #fbfbfd;
        }
        .header{
            width:100%;
            height:50px;
            line-height:50px;
            background-color: #f8f8f8;
            color: #999;
            font-size:15px;
        }
       
    </style>
</head>
<body>
    <div id="app" >
        <!--顶部-->
        <div class="top">
            <el-row>
                <el-col :span="5">
                    <div>
                        <img src="~/Content/imgs/logo.png" style="height: 37px; width: 135px;" />
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="search">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" v-on:click="searchKey"></i>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <div class="top_item">
                        <a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                        <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>
                        <a href="/Car/BuyCar">
                            购物车 <el-badge :value="Carcount" class="item" type="primary">
                                <i class="el-icon-shopping-cart-1"></i>
                            </el-badge>

                        </a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--导航-->
        <div class="navi">
            <a class="active" href="/Home/Index">首页</a>
            <a href="/Music/MusicType">分类</a>
            <a href="/Music/NewCd">新碟</a>
            <a href="/Music/Singer">歌手</a>
            <a href="/Music/MusicRank">排行榜</a>
            <a href="/Music/RecomMusic">推荐歌单</a>
        </div>

        <div class="display">
            <div class="left">
                <div class="lefttop">
                    <div class="leftimg">
                        <img src="~/Content/musicImg/1.jpg" width="220" height="220"/>
                    </div>
                    <div class="leftdesc">
                        <div style="height:18%;"></div>
                        <div style="height:20%;"><b style="font-size:24px;"> 天赐的声音 | 音色为王 举世无双</b> </div>
                        <div style="height:16%;">标签： 安静 睡眠</div>
                        <div style="height:12%;"> 点击量：1000</div>
                        <div style="height:12%;">购买量 ： 1000</div>
                        <div style="height:22%;"><el-button type="primary">全部加入</el-button></div>


                    </div>
                </div>
                <div class="musiclist">
                    <el-row class="header">
                        <el-col :span="2" style="text-align:center">&nbsp;</el-col>
                        <el-col :span="7">歌名</el-col>
                        <el-col :span="7">歌手</el-col>
                        <el-col :span="3">时长</el-col>
                        <el-col :span="5">操作</el-col>
                    </el-row>
                    <el-row v-for="(item,index) in tableData" style="width:100%;height:40px;line-height:40px;font-size:13px;" :class="{on:index%2!=0}">
                        <el-col :span="2" style="text-align:center">{{index+1}}</el-col>
                        <el-col :span="7">{{item.musciName}}</el-col>
                        <el-col :span="7">{{item.musicPeo}}</el-col>
                        <el-col :span="3">{{item.musicTime}}</el-col>
                        <el-col :span="5">
                            <el-button type="text" size="small" onclick="window.location.href='/Home/MusicListen'">试听</el-button>
                            <el-button type="text" size="small">加入购物车</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="right">
                <b style="font-size:18px;line-height:40px;">简介</b> <br />
                <p style="font-size:15px;">睡前小故事： 很喜欢一个人是怎样的感觉呢？小兔子很想知道。松鼠太太剥开一颗松子，把果仁塞进嘴里说：“每一次我感觉自己有一点点喜欢他，我就往自己的嘴里塞一个果仁。” </p>
            </div>
        </div>
        <!--底部-->
        <footer class="el-footer-css">
            <div > <a hidefocus="true">关于我们</a>| <a hidefocus="true">监督举报</a> | <a hidefocus="true">广告服务</a> | <a hidefocus="true">投诉指引</a> | <a>隐私政策</a> | <a>儿童隐私政策</a> | <a hidefocus="true">用户服务协议</a>  |  <a hidefocus="true">招聘信息</a> | <a hidefocus="true">客服中心</a> | <a hidefocus="true">用户体验提升计划</a></div>
        </footer>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    search: '',
                    Carcount: 18,
                    tableData: [
                         {
                              musciName: '火苗',
                              musicPeo: '苏晗',
                              musicTime: '00:11',
                              musicPz  :'SQ'   
                         },
                         {
                              musciName: '美丽女人',
                              musicPeo: '程响',
                             musicTime: '03:55',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '很久以后',
                              musicPeo: 'G.E.M. 邓紫棋',
                             musicTime: '04:50',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '口是心非',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '03:23',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        }
                    ],
                }
            },
            mounted() {
             
            },
            methods: {
                searchKey() {
                    if (this.search == '' || this.search == null) {
                       
                    } else {
                        location.href = '/Home/SearchMusic?keyWord=' + this.search
                    }
                }
            }
        })
    </script>
</body>
</html>
